<template>
	<div class="policy-wrapper">
		<p class="title-label text-title">政策文件</p>
		<ul class="nav-menu" v-if="dataList.length>0">
			<li class="nav-menu-item flex" v-for="(item, index) in dataList" :key="index" @click="handleDetail(item)">
				<el-avatar shape="square" class="icon" :style="{ background: item.color }"> {{ item.policyTitle.substring(0, 1) }} </el-avatar>
				<div class="right">
					<p>{{ item.policyTitle }}</p>
					<p>{{ item.tip }}</p>
					<p>{{ item.time }}</p>
				</div>
			</li>
      <li>
        <el-button text type="primary" @click="handleLinkto">查看更多
          <el-icon>
            <icon-right theme="outline" size="24"/>
          </el-icon>
        </el-button>
      </li>
		</ul>
    <el-empty v-else description="无数据" />

    <el-dialog v-model="visible"  width="65%" append-to-body>
			<DetailPage v-if="visible" v-bind="detailConfig(true)" :model="nowRowData"></DetailPage>
		</el-dialog>
	</div>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import apiMod from '@/apiMod'
import DetailPage from '@/views/aplid/DetailPage/index.vue'
import {detailConfig} from './config'
const router = useRouter()
const visible = ref(false)
const nowRowData = ref({})

const dataList = ref([
	{ policyTitle: '服务工单对象导入完成！', tip: '后台进行中的任务（1000条），进度完成！', time: '刚刚', color: '#00CFAD' },
	{ policyTitle: '市指导中心上传了最新的政策文件。', tip: '请查阅《关于印发〈南京市社区居家管理…', time: '一个小时前', color: '#0052D9' },
	{ policyTitle: '服务工单对象导入完成！', tip: '后台进行中的任务（1000条），进度完成！', time: '昨天', color: '#00CFAD' },
	{ policyTitle: '服务工单对象导入完成！', tip: '后台进行中的任务（1000条），进度完成！', time: '07-01', color: '#00CFAD' },
])

const getInitData = ()=> {
  apiMod.dpPolicyDocument_page({
    pageParaPO: {
      size:4,
      current:1
    }
  }).then(res=> {
    const data = res.data.records.map(item=> {
      return {
        ...item,
        color:Math.random() > 0.5? '#00CFAD' : '#0052D9',
      }
    })
    dataList.value = data
  })
}
const handleLinkto =()=> {
  router.push('/datacenter/business/policyData/index?activeName=2')
}

const handleDetail = (item)=> {
  nowRowData.value = item
  visible.value = true 
}
onMounted(()=> {
  getInitData()
})
</script>

<style scoped lang="scss">
.text-title {
	font-family: 'Microsoft YaHei Bold';
	font-weight: 700;
	font-size: 16px;
	text-align: left;
	color: #1c1c28;
	padding: 11px 0;
}
.policy-wrapper {
  width:100%;
  height:auto;
  position:relative;
}
.nav-menu {
	background: #fff;
	padding: 10px;
	border-radius: 10px;
	&-item {
    margin:6px;
		border-bottom: 1px solid #f5f5f5;
    .right {
      max-width:calc(100% - 50px);
    }
		.icon {
			width: 48px;
			height: 48px;
			border-radius: 4px;
			margin-right: 10px;
			font-weight: 700;
			font-size: 26px;
			color: #feffff;
		}
	}
}
</style>
